<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script type="text/javascript" src="../js/toolLibrary/Zepto-1.2.0-min.js"></script>
    <script type="text/javascript" src="../js/pageFlex.js"></script>
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
<!--<p class="textDescription">请在空白区域签上您的姓名，然后点击"确认"按钮。如您对手获得货物存有疑问，请点击取消，并及时联系我们！</p>-->
<!--<p class="textDescription">在签收详情的页首，留有我司发货人员的联系方式。</p>-->
<!--<p class="textDescription">您签字之后，我们将保留签字的屏幕快照，并承诺仅作为存档用途。</p>-->
<div class="signatureArea">
    <canvas id="signatureArea" height="300"></canvas>
</div>
<!--<div id="image"></div>-->
<div class="clickButton_group">
    <div class="clickButton clickButton_commitImage">提交</div>
    <div class="clickButton clickButton_back">取消</div>
</div>
</body>
<script type="text/javascript">
    let outBillCode = "";
    if(window.location.search == ""){
        // window.location.href = "./404.html";
    }else {
        outBillCode = window.location.search.split('=')[1];
    }
    let start_x,start_y,move_x,move_y,end_x,end_y;
    let canvas=document.getElementById("signatureArea");
    let ctx=canvas.getContext("2d");

    let t=document.getElementById('signatureArea').offsetTop;//canvas上边距
    let l=document.getElementById('signatureArea').offsetLeft;//canvas做边距
	
    let canvasWidth = document.getElementsByClassName("signatureArea")[0].clientWidth - 2;
    document.getElementById("signatureArea").width = canvasWidth;
    //按下
    document.getElementById("signatureArea").addEventListener("touchstart",function(e){
        e.preventDefault();
        start_x=e.touches[0].pageX - l;
        start_y=e.touches[0].pageY - t;
    }, {passive:false});
    //移动
    document.getElementById("signatureArea").addEventListener("touchmove",function(e){
        e.preventDefault();
        move_x=e.touches[0].pageX - l;
        move_y=e.touches[0].pageY - t;
    },{passive:false});
    //松开
    document.getElementById("signatureArea").addEventListener("touchend",function(e){
        e.preventDefault();
        end_x=e.changedTouches[0].pageX-l;
        end_y=e.changedTouches[0].pageY-t;
    },{passive:false});
    document.getElementById("signatureArea").addEventListener("touchstart",function(e){
        e.preventDefault();
        start_x=e.touches[0].pageX-l;
        start_y=e.touches[0].pageY-t;
        //开始本次绘画
        ctx.beginPath();
        //画笔起始点
        ctx.moveTo(start_x, start_y);
    },{passive:false});
    document.getElementById("signatureArea").addEventListener("touchmove",function(e){
        move_x=e.touches[0].pageX-l;
        move_y=e.touches[0].pageY-t;
        //根据鼠标路径绘画
        ctx.lineTo(move_x, move_y);
        //立即渲染
        ctx.stroke();
    },{passive:false});
    document.getElementById("signatureArea").addEventListener("touchend",function(e){
        e.preventDefault();
        end_x=e.changedTouches[0].pageX-l;
        end_y=e.changedTouches[0].pageY-t;
        //创建从当前点到开始点的路径
        ctx.closePath();
    },{passive:false});

    $('.clickButton_commitImage').on('click',function () {
        let canvas = document.getElementById("signatureArea");
        let base64Data = canvas.toDataURL("image/png", 1.0);
        let blob = dataURItoBlob(base64Data);
        let fd = new FormData();
        fd.append("file", blob);
        fd.append("outBillCode",outBillCode);
        let xmlHttp = new XMLHttpRequest();
        //xmlHttp.open("POST","http://192.168.10.200:8080/relay/sign/pic");
		//xmlHttp.open("POST","http://10.168.173:8079/relay/sign/pic");
		xmlHttp.open("POST","http://172.20.10.4:8913/wms/out/master/sign/confirm");
        xmlHttp.send(fd);
        //ajax回调
        xmlHttp.onreadystatechange = () => {
            if(xmlHttp.readyState == '4'){
                alert('提交成功');
            }
        };
    })

    function dataURItoBlob (base64Data) {
        let byteString;
        if (base64Data.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(base64Data.split(',')[1]);
        else
            byteString = unescape(base64Data.split(',')[1]);
        let mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
        let ia = new Uint8Array(byteString.length);
        for (let i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ia], {type: mimeString});
    };

    $('.clickButton_back').on('click',function () {
        window.history.go(-1);
    })
</script>
</html>
